<template>
    <div>
        <div class="index-box">
            <van-search v-model="keyWord" placeholder="请输入搜索关键词" />
            <van-swipe :autoplay="3000" class="swipe-box" :show-indicators = "false">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <router-link tag="img" :to="{name:'detail', query:{ id: image.id,openId:openIdObj.openid }}" :src="image.url" />
                </van-swipe-item>
            </van-swipe>
            <div class="all-name">
                全部讲解
            </div>
            <ul class="content-box">
                <li class="li-box" style="margin-left:2%">
                    <img src="../assets/a.png" alt="">
                </li>
                <li class="li-box" style="margin-left:3%">
                    <img src="../assets/b.png" alt="">
                </li>
                <router-link tag="li" :to="{name:'detail', query:{ id: item.id,openId:openId }}" v-for="(item,index) in list" :key="index" class="li-box"  :style="{marginLeft:[index%2 != 0 ? '3%' : '2%']}">
                    <img :src="item.picUrl" alt="">
                    <p>{{item.name}}</p>
                </router-link>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            keyWord:'',
            images: [],
            list:[],
            openIdObj:{},
            code:'',
            openId:sessionStorage.getItem('openId') ? sessionStorage.getItem('openId') : '',
        }
    },
    mounted(){
        this.indexMsg()
        this.getWxSeting()
    },
    methods:{
        // 首页信息
        indexMsg(){
            this.$get('/wx/home/index').then(resp=>{
                if(resp.errno == 0){
                    this.list = resp.data.brandList
                    this.images = resp.data.banner
                }
            })
        },
        //获取微信配置
        getWxSeting(){
            this.$post('/wx/order/getWxConfig','').then(resp=>{
                if(resp){
                    this.getCode(resp.appId)
                }
            })
        },
        getCode(appId){
            let url = window.location.search;
            let start = window.location.search.indexOf("=");
            let end = window.location.search.indexOf("&");
            let code = url.substring(start + 1, end); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
            const local = window.location.href
            // const local = 'http://www.youling123.xyz'
            if (code == null || code ==='') {
                window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
            } else {
                this.code = code
                if(!sessionStorage.getItem('openId')){
                    this.getOpenId() //把code传给后台获取用户信息
                }
            }
        },
        getOpenId () { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
            this.$get('/wx/home/getOpenId', {code: this.code}).then((resp) => {
                sessionStorage.setItem('openId',resp.openid)
                this.openId = resp.openid
                this.openIdObj = resp
            })
        },
    }
}
</script>
<style lang="less" scoped>
.index-box{
    width: 95%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    .van-search{
        padding:0;
        margin: .2rem 0;
        .van-search__content{
            background-color: #fff;
        }
    }
    .swipe-box{
        width: 100%;
        height: 2.5rem;
        img{
            width: 100%;
            height: 100%;
            border-radius: .1rem;
        }
    }
    .all-name{
        font-size: .32rem;
        font-weight: bold;
        height: .8rem;
        line-height: .8rem;
    }
    .content-box{
        background-color: #fff;
        border-top:solid 1px #ccc;
        width: 98%;
        padding: 0 1% 3% 1%;
        display: table;
        .li-box{
            width: 46.5%;
            display: inline-block;
            margin-left: 2%;
            margin-top: 3%;
            img{
                width: 100%;
                height: 2rem;
                border-radius: .1rem;
            }
            p{
                height: .5rem;
                line-height: .5rem;
                margin: 0;
            }
        }
    }
}

.dialog{
    padding-left: .6rem;
    padding-right: .6rem;
    text-align: center;
}
</style>